<template>
    <div class="rebrand-box">
        <panel-com title="热门品牌"  sub-title="国际经典 品质保证">
            <template #right>
                <span :class="onShow?'active':''" @click="onPrev">&lt;</span>
                <span :class="onShow?'':'active'" @click="onNext">></span>
            </template>
            <!-- 主体内容区域 -->
            <div class="box">
                <ul :class="onShow?'prev':'next'" ref="box" class="rebrand-list">
                    <li v-for="item in list" :key="item.id">
                        <RouterLink to="/">
                            <img v-lazy="item.picture" alt="">
                        </RouterLink>
                    </li>
                </ul>
            </div>
        </panel-com>
    </div>
</template>

<script>
import PanelCom from './products/children/PanelCom.vue'
export default {
  components: { PanelCom },
    name:"ReBrand",
    data(){
        return {
            list:[],
            onShow: true,
        }
    },
    async created() {
        let res = await this.$http.ReBrand();
        this.list = res.data.result;
    },
    methods: {
        onPrev() {
            this.onShow = true;
        },
        onNext() {
            this.onShow = false;
        }
    }
}
</script>

<style scoped lang="scss">
.rebrand-box{
    width: 100%;
    .head{
        span{
            background: #ccc;
            cursor: not-allowed;
            color: #fff;
        }
        .active{
            background: greenyellow
        }
    }
    .box{
        box-sizing: border-box;
        display: flex;
        width: 100%;
        height: 345px;
        overflow: hidden;
        padding-bottom: 40px;
        position: relative;
        ul{
            box-sizing: border-box;
            width: 200%;
            display: flex;
            transition: all 1s;
            position: absolute;
            top: 0;
            left: 0;
            li{
                box-sizing: border-box;
                margin-right: 10px;
                width: 240px;
                height: 305px;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
        ul.prev {
            transform: translateX(0%);
        }
        ul.next {
            transform: translateX(-50%);
        }
    }
}
</style>